<template>
    <div class="root">
        <div class="top">
            <div class="search">
                <div style="display: flex;">
                    <el-input prefix-icon="el-icon-menu" placeholder="请输入书籍名称或作者"
                        v-model="input" clearable>
                    </el-input>
                    <el-button class="top-btn" @click="search">搜素</el-button>
                </div>
            </div>
            <div class="add-btn">
                <router-link to="/addBook">
                    <el-button plain class="top-btn">添加图书</el-button>
                </router-link>
            </div>
        </div>
        <div class="bottom">
            <el-table :data="bookData" :header-cell-style="{'text-align': 'center'}" :cell-style="{'text-align': 'center'}" border>
                <el-table-column prop="bookName" label="书籍名称"></el-table-column>
                <el-table-column prop="bookAuthor" label="作者"></el-table-column>
                <el-table-column prop="bookPress" label="出版社"></el-table-column>
                <el-table-column prop="bookStatus" label="书籍状态">
                    <template slot-scope="scope">
                        {{scope.row.bookStatus == 0 ? '可借阅' : (scope.row.bookStatus == 1 ? '已借阅' : '已下架')}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-link type="info" :underline="false" @click="dialogTableVisibleData(scope.row.bookId)">详情</el-link>
                        <!-- <el-link type="success" :underline="false" @click="lend(scope.row.bookId)">借阅</el-link> -->
                        <el-link :underline="false" style="color: #6777ef;" @click="dialogFormVisibleData(scope.row.bookId)">编辑</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 对话框 -->
        <el-dialog title="书籍详情" :visible.sync="dialogTableVisible">
            <book-info :bookInfoData="bookInfoData"></book-info>
        </el-dialog>
        <!-- 对话框 -->
        <el-dialog title="编辑书籍" :visible.sync="dialogFormVisible">
            <el-form :inline="true" :model="form">
                <el-form-item label="书籍名称" :label-width="formLabelWidth">
                    <el-input v-model="form.bookName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth">
                    <el-input v-model="form.bookAuthor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版社" :label-width="formLabelWidth">
                    <el-input v-model="form.bookPress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标准ISBN" :label-width="formLabelWidth">
                    <el-input v-model="form.bookIsbn" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="书籍页数" :label-width="formLabelWidth">
                    <el-input v-model="form.bookPagination" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="书籍价格" :label-width="formLabelWidth">
                    <el-input v-model="form.bookPrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="书籍状态" :label-width="formLabelWidth">
                    <el-select v-model="form.bookStatus" placeholder="请选择活动区域">
                        <el-option label="上架" value="0"></el-option>
                        <el-option label="上架" value="1" style="display: none;"></el-option>
                        <el-option label="上架" value="2" style="display: none;"></el-option>
                        <el-option label="下架" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button style="background-color: #6777ef; color: #fff; border: none;" @click="bookModify">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分页 -->
        <div class="footer">
            <el-pagination 
            background 
            layout="prev, pager, next, total"
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-size="params.pageSize"
            :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import api from '@/api/request.js'
import router from '@/router'
import BookInfo from './BookInfo.vue'
export default {
    components: { BookInfo },
    data() {
        return {
            input: '',
            bookData: [],               //需要展示的书籍
            bookInfoData: [],           //书籍详情
            dialogTableVisible: false,  // 详情对话框控制
            dialogFormVisible: false,   // 编辑对话框控制
            gridData: [],
            form: {
                bookId: "",
                bookAuthor: "",
                bookIsbn: "",
                bookName: "",
                bookPagination: "",
                bookPress: "",
                bookPrice: ""
            },
            formLabelWidth: '120px',
            //分页
            total: 100,
            params: {
                page: 1,
                pageSize: 10,
                name: ''
            },
            lendParams: {
                bookId: '',
                userId: ''
            }
        }
    },
    methods: {
        //书籍详情
        dialogTableVisibleData(id) {
            api.queryBookById(id).then(res => {
                if (String(res.data.code) === '1') {
                    this.bookInfoData = res.data.data;
                } else {
                    this.$message.error(res.data.msg);
                    router.push('/login');
                }
            }).catch(error => {
                console.log(error);
                this.$message.error('出错啦');
            });
            this.dialogTableVisible = true;
        },
        //编辑书籍-信息回显
        dialogFormVisibleData(id) {
            api.queryBookById(id).then(res => {
                if (String(res.data.code) === '1') {
                    this.form = res.data.data;
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(error => {
                console.log(error);
                this.$message.error('出错啦');
            });
            this.dialogFormVisible = true;
        },
        //修改书籍
        bookModify() {
            api.editBookInfo(this.form).then(res => {
                if (String(res.data.code) === '1') {
                    this.dialogFormVisible = false;
                    this.load();
                    this.$message.success(res.data.data);
                } else {
                    this.$message(res.data.msg);
                }
            }).catch(error => {
                console.log(error);
                this.$message.error('出错啦');
            });
        },
        search() {
            if(this.input === '') {
                this.load();
                return;
            }
            api.queryBookNameOrAuthor(this.input).then(res => {
                if (String(res.data.code) === '1') {
                    this.bookData = res.data.data;
                } else {
                    this.$message(res.data.msg);
                }
            }).catch(error => {
                console.log(error);
                this.$message.error('出错啦');
            });
        },
        //没用先放这里
        lend(id) {
            this.$confirm('确定要借？？？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 借书操作
                this.lendParams.bookId = id;
                this.lendParams.userId = localStorage.getItem('employee');
                api.lendBook(this.lendParams).then(res => {
                    if (String(res.data.code) === '1') {
                        this.load();
                    } else {
                        this.$message(res.data.msg);
                    }
                    }).catch(error => {
                    console.log(error);
                    this.$message.error('出错啦');
                })
                }).catch(() => {
                this.$message({type: 'info', message: '已取消'});          
            });
        },
        //加载页面
        load() {
            api.page(this.params).then(res => {
                // 判断是否登录
                if(res.data.msg == "NOTLOGIN"){
                    router.push('/login');
                }
                this.bookData = res.data.data.records;
            }).catch(error => {
                console.log(error);
                this.$message.error('出错啦');
            })
        },
        //分页查询
        handleCurrentChange(page) {
            // 点击分页按钮触发分页
            this.params.page = page
            this.load()
        }
    },
    created() {
        this.load();
    },
    mounted() {
        api.total().then(res => {
            this.total = res.data.data;
        }).catch(error => {
            console.log(error);
            this.$message.error('出错啦');
        })
    }
}
</script>

<style scoped>
    .root {
        height: 100%;
    }

    .top {
        height: 10%;
        display: flex; 
        margin: 0 20px;
        align-items: center; 
        justify-content: space-between;
        /* background-color: beige; */
    }

    .bottom {
        /* height: 80%; */
        margin: 0 20px;
        background-color: rgb(133, 133, 98);
    }

    .footer {
        /* height: 10%; */
        margin: 1%;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        /* background-color: black; */
    }

    .el-link {
        margin: 0 2px;
    }

    .top-btn:hover {
        border-color: #6777ef;
        color: #6777ef;
    }
</style>